<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>添加品牌-{{message}}</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName" @blur="chkName()">{{brand.brandName}}<br>
        企业名称：<input id="companyName" name="companyName" v-model="brand.companyName">{{brand.companyName}}<br>
        排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
        状态：
        <input type="radio" name="status" value="0" v-model="brand.status">禁用
        <input type="radio" name="status" value="1" v-model="brand.status">启用<br>

        <input type="button" id="btn"  value="提交">
        <input type="button" id="btnVue"  value="Vue提交" @click="submitData()">
    </form>
</div>
</body>
<script>
    new Vue({
        el:"#app", // 覆盖Vue操作的页面区域
        data(){  //ES6语法 ECMAScript 6
            // 这里面就放数据的，这个数据是与页面元素进行双向绑定的
            // 收集数据，或反向显示数据
            return {
                message:"Hi Brand",
                // brandName:"heima",  // 存储品牌的名字
                brand:{
                   brandName:"",
                   companyName:"",
                    ordered:"",
                    description:"",
                    status:""

                }
            };
        },
        methods:{  // 定义很多给函数，用于事件处理
            chkName(){
                console.log("品牌文本框失去焦点....");
                console.log(this.brand.brandName);
            },
            submitData(){
                console.log("Vue按钮提交....");
                // 当提交数据时，能自动把数据放在data的对象或属性中
                // 直接打印对象即可
                console.log(this.brand);
                //现在页面的数据，被自动收集到哪里了？
                //2. 使用axios发送请求时，直接使用Vue对象的data数据，一定要加this(当前vue对象）
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo/addServlet",
                    data:this.brand
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if(resp.data == "success"){
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })
            }
        }
    });
</script>
<script>

    //1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
        let status = document.getElementsByName("status");
        let statusChecked = "";
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
                statusChecked = status[i].value ;
            }
        }
        // 将表单数据转为json
        var formData = {
            brandName:document.getElementById("brandName").value,
            companyName:document.getElementById("companyName").value,
            ordered:document.getElementById("ordered").value,
            description:document.getElementById("description").value,
            status:statusChecked,
        };
        console.log("formData:",formData);
        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:formData
        }).then(function (resp) {
            // 判断响应数据是否为 success
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html";
            }
        })
    }
</script>
</html>